<template>
    <transition name="slide-fade">
        <div class="the-aside" v-if="showAside">
            <div class="top"></div>
            <ul class="menus">
                <li
                        v-for="(item, index) in listOfSongs"
                        :key="index"
                        :class="{ 'is-play': id ===item.id }"
                        @click="
            toplay(
              item.id,
              item.url,
              item.pic,
              index,
              item.name,
              item.lyric
            )
          "
                >
                    {{ replaceFName(item.name) }} -
                    <span class="item-name">{{ replaceLName(item.name) }}</span>
                    <img src="../assets/is-play.gif" class="icon-is-play" v-show="id ===item.id">
                    <span class="mui-icon mui-icon-closeempty"></span>
                </li>
            </ul>
        </div>
    </transition>
</template>

<script>
    import { mapGetters } from "vuex";
    import { getCollectOfUserId } from "../utils/index";
    import axios from "axios";

    export default {
        name: "TheAside",
        computed: {
            ...mapGetters([
                "showAside", //是否显示播放中的歌曲列表
                "listOfSongs", //当前歌曲列表
                "id", //播放中的音乐id
                "loginIn", //用户是否已登录
                "userId", //当前登录用户的id
                "isActive", //当前播放的歌曲是否已收藏
            ]),
        },
        mounted() {
            let _this = this;
            document.addEventListener(
                "click",
                function () {
                    _this.$store.commit("setShowAside", false);
                },
                true
            );
        },
        methods: {
            //获取名字前半部分--歌手名
            replaceLName(str) {
                let arr = str.split("-");
                return arr[0];
            },
            //获取名字后半部分--歌名
            replaceFName(str) {
                let arr = str.split("-");
                return arr[1];
            },
            //播放
            toplay: function (id, url, pic, index, name, lyric) {
                this.$store.commit("setId", id);
                this.$store.commit("setUrl",  url);
                this.$store.commit("setPicUrl",  pic);
                this.$store.commit("setListIndex", index);
                this.$store.commit("setTitle", this.replaceFName(name));
                this.$store.commit("setArtist", this.replaceLName(name));
                this.$store.commit("setLyric", this.parseLyric(lyric));
                this.$store.commit("setIsActive", false);
                if (this.loginIn) {
                    axios.get("http://localhost:8888/collect/collectOfUserId",{params: {userId:this.userId}}).then(res=>{
                        // this.collectList.push(res.data); this.albumDatas = res;
                        for (let item of res.data) {
                            if (item.songId == id) {
                                this.$store.commit("setIsActive", true);
                                break;
                            }
                        }
                    }).catch(err=>{
                            console.log(err)
                        }
                    )
                    ///collect/collectOfUserId?userId=${userId}
                    // getCollectOfUserId(this.userId).then((res) => {
                    //     for (let item of res) {
                    //         if (item.songId == id) {
                    //             this.$store.commit("setIsActive", true);
                    //             break;
                    //         }
                    //     }
                    // });
                }
            },
            //解析歌词
            parseLyric(text) {
                let lines = text.split("\n"); //将歌词按行分解成数组
                let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g; //时间格式的正则表达式
                let result = []; //返回值
                //对于歌词格式不对的直接返回
                if (!/\[.+\]/.test(text)) {
                    return [[0, text]];
                }
                //去掉前面格式不正确的行
                while (!pattern.test(lines[0])) {
                    lines = lines.slice(1);
                }
                //遍历每一行，形成一个每行带着俩元素的数组，第一个元素是以秒为计算单位的时间，第二个元素是歌词
                for (let item of lines) {
                    let time = item.match(pattern); //存前面的时间段
                    let value = item.replace(pattern, ""); //存后面的歌词
                    for (let item1 of time) {
                        let t = item1.slice(1, -1).split(":"); //取出时间，换算成数组
                        if (value != "") {
                            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
                        }
                    }
                }
                //按照第一个元素--时间--排序
                result.sort(function (a, b) {
                    return a[0] - b[0];
                });
                return result;
            },
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    li{
        margin-top: 1em;
        position: relative;
    }
    .the-aside{
        z-index: 1000;
        background-color: #f7f7f7;
        width: 100%;
        height: 75%;
        position: fixed;
        bottom: 0;
        opacity: 95%;
        text-align: left;
        padding: 0 1em;
        border-radius: 5% 5% 0 0;
    }
    .top{
        width: 4em;
        height: .25em;
        border-radius: 10%;
        background-color: #8e98a2;
        margin: 1em auto 0 auto;
    }
    .is-play{
        color: $color-blue-dark;
    }

    .item-name{
        font-size: .75em;
    }

    .icon-is-play{
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: absolute;
        right: 2em;
        top: .15em;
    }

    .mui-icon-closeempty{
        float: right;
        font-size: 1.5em;
        color: $color-grey;
    }
</style>
